<template>
  <div ref="popup" class="gl-popup">
    <van-popup v-model="show" class="df-popup">
      <div class="toast tac ovh lh1" v-if="type === 'toast'">
        <img class="toast-icon vat" :src="icon" alt="" v-show="icon" :style="iconStyle">
        <div class="box-tips wspl" :style="tipStyle">{{content}}</div>
      </div>
      <div class="del-bind-box ovh tac" v-else>
        <div class="box-title">{{title}}</div>
        <div class="box-content wspl">{{content}}</div>
        <div class="box-footer flex">
          <div class="left-btn flex-1" @click="show = false">{{cancelText}}</div>
          <div class="right-btn flex-1" @click="sureCallback">{{sureText}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: "GlPopup",
    data() {
      return {
        show: true,
      }
    },
    props: {
      type: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      tipStyle: {
        type: String | Object,
        default: ''
      },
      iconStyle: {
        type: String | Object,
        default: ''
      },
      title: {
        type: String,
        default: '温馨提示'
      },
      content: {
        type: String,
        default: ''
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      sureText: {
        type: String,
        default: '确定'
      },
    },
    watch: {
      show(val) {
        if (!val) {
          let popup = this.$refs.popup;
          this.$emit('close');
          setTimeout(() => popup.parentElement.removeChild(popup), 1000);
        }
      },
    },
    methods: {
      sureCallback() {
        this.$emit('sure', () => this.show = false);
      },
    },
  }
</script>

<style scoped lang="less">
  .toast {
    padding: .94rem 0 1.56rem;
    width: 10.63rem;
    background-color: #fff;
    border-radius: .63rem;
    color: #333;
    font-size: 1rem;
  }

  .toast-icon {
    margin-bottom: .63rem;
    width: 4.75rem;
  }

  .box-tips {
    margin-top: .62rem;
  }

  .del-bind-box {
    width: 16.88rem;
    background-color: #fff;
    border-radius: .63rem;
    color: #333;
    font-size: .94rem;
    line-height: 1.5;
  }

  .box-title {
    padding: 1.53rem 0 1.03rem;
    font-weight: bold;
    font-size: 1.13rem;
    line-height: 1;
  }

  .box-footer {
    margin-top: 1.06rem;
    border-top: #eee solid .06rem;
    line-height: 3.56rem;
    font-size: 1rem;
    > :nth-child(n) {
      &:hover {
        background-color: #f5f5f5;
      }
    }
    > :not(:first-child) {
      border-left: #eee solid .06rem;
    }
    .right-btn {
      color: #1f8bf8;
    }
  }
</style>
